<script lang="ts">
export default {
  name: 'user'
};
</script>

<script setup lang="ts">
import { UploadFile } from 'element-plus';
import {
  getUserPage,
  getUserForm,
  deleteUsers,
  deleteListUsers,
  addUser,
  updateUser,
  updateUserStatus,
  updateUserPassword,
  downloadTemplateApi,
  exportUser,
  importUser
} from '@/api/user';
import { listDeptOptions } from '@/api/dept';
import { getJobPage } from '@/api/job';
import { listTenant } from '@/api/tenant';
import { JobVO } from '@/api/job/types';
import { RolePageVO } from '@/api/role/types';
import { getRolePage } from '@/api/role';
import { TenantPageVO } from '@/api/tenant/types';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { UserForm, UserQuery, UserPageVO } from '@/api/user/types';
import { value } from 'dom7';
import { statusOptionList } from '@/option'

//const deptTreeRef = ref(ElTree); // 部门树
const queryFormRef = ref(ElForm); // 查询表单
const userFormRef = ref(ElForm); // 用户表单


const miniioUrl = `${window.IPConfig.MINIIO}`

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const dialog = reactive<DialogOption>({
  visible: false
});

const queryParams = reactive<UserQuery>({
  current: 1,
  pageSize: 10
});
const userList = ref<UserPageVO[]>();

const formData = reactive<UserForm>({
  status: 1,
  password: "123456"
});

const rules = reactive({
  name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
  roleId: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
  jobId: [{ required: true, message: '用户职位不能为空', trigger: 'blur' }],
  // tenantRelaArr: [{ required: true, message: '租户不能为空', trigger: 'blur' }],
  email: [
    {
      required: true,
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: '请输入正确的邮箱地址',
      trigger: 'blur'
    }
  ],
  mobile: [
    {
      required: true,
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ]
});

interface optionOV {
  label: string,
  value: number
}

const searchDeptName = ref();
const deptList = ref<OptionType[]>();
const roleList = ref<RolePageVO[]>();
const jobList = ref<JobVO[]>();
const tenantList = ref<optionOV[]>();

const importDialog = reactive<DialogOption>({
  title: '用户导入',
  visible: false
});
const importDeptId = ref<number>(0);
const excelFile = ref<File>();
const excelFilelist = ref<File[]>([]);


const passwordVisible = ref(false);

watchEffect(
  () => {
    // deptTreeRef.value.filter(searchDeptName.value);
  },
  {
    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
  }
);

/**
 * 部门筛选
 */
function handleDeptFilter(value: string, data: any) {
  if (!value) {
    return true;
  }
  return data.label.indexOf(value) !== -1;
}

/**
 * 部门树节点
 */
function handleDeptNodeClick(data: { [key: string]: any }) {
  queryParams.deptId = data.value;
  handleQuery();
}

/**
 * 获取角色下拉列表
 */
async function getRoleOptions() {
  //console.log(1231123)
  getRolePage({
    current: 1,
    pageSize: 1000,
    status: 1,
  }).then(res => {
    console.log(res)
    roleList.value = res.data.data;
  });
}

/**
 * 获取职位列表
 */
async function getJobOptions() {
  //console.log(1231123)
  getJobPage({
    current: 1,
    pageSize: 1000,
    status: 1,
  }).then(res => {
    console.log("职位", res)

    jobList.value = res.data.data;
  });
}

/**
 * 获取租户列表
 */
async function getTenantOptions() {
  listTenant({
    current: 1,
    pageSize: 9999,
    status: 1,
  }).then(res => {
    tenantList.value = res.data.data.map((item: any) => ({ value: item.id, label: item.tenantName }))
  });
}

/**
 * 修改用户状态
 */
function handleStatusChange(row: { [key: string]: any }) {
  const text = row.status === 1 ? '启用' : '停用';
  ElMessageBox.confirm('确认要' + text + row.name + '用户吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      return updateUserStatus(row.id, row.status);
    })
    .then(() => {
      ElMessage.success(text + '成功');
    })
    .catch(() => {
      row.status = row.status === 1 ? 0 : 1;
    });
}

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  getUserPage(queryParams)
    .then((res) => {

      userList.value = res.data.data;
      total.value = res.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.current = 1;
  queryParams.deptId = undefined;
  handleQuery();
}

/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}

/**
 * 重置密码
 */
function resetPassword(row: { [key: string]: any }) {
  ElMessageBox.prompt(
    '请输入用户「' + row.name + '」的新密码',
    '重置密码',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }
  )
    .then(({ value }) => {
      if (!value) {
        ElMessage.warning('请输入新密码');
        return false;
      }
      updateUserPassword(row.id).then(() => {
        ElMessage.success('密码重置成功，新密码是：' + value);
      });
    })
    .catch(() => { });
}

/**
 * 打开弹窗
 *
 * @param userInfo 用户
 */
async function openDialog(userInfo?: object) {
  await getDeptOptions();
  await getRoleOptions();
  await getJobOptions();
  // await getTenantOptions()
  dialog.visible = true;
  if (userInfo) {
    dialog.title = '修改用户';
    await nextTick()
    Object.assign(formData, userInfo);
    // setTimeout(() => {
    //   Object.assign(formData, userInfo);
    // },150)

    // getUserForm(userId).then(({ data }) => {
    //   Object.assign(formData, data);
    // });
  } else {
    resetForm();

    dialog.title = '新增用户';
  }
}

/**
 * 关闭用户弹窗
 */
function closeDialog() {
  dialog.visible = false;

}

/**
 * 重置表单
 */
function resetForm() {
  try {
    userFormRef.value.resetFields();
    userFormRef.value.clearValidate();

    formData.id = undefined;
    formData.status = 1;

  } catch (error) {
    console.log(error)
    return false;
  }

}

/**
 * 表单提交
 */
function handleSubmit() {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      const userId = formData.id;
      loading.value = true;
      if (userId) {
        updateUser(formData)
          .then(() => {
            ElMessage.success('修改用户成功');
            closeDialog();
            resetQuery();
          })
          .finally(() => (loading.value = false));
      } else {

        addUser(formData)
          .then(() => {
            ElMessage.success('新增用户成功');
            closeDialog();
            resetQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

/**
 * 删除用户
 */
function handleDelete(id?: number) {
  let idList = ids.value
  id ? idList = [...ids.value, id] : null
  if (idList.length === 0) {
    ElMessage.warning('请勾选删除项');
    return;
  }

  ElMessageBox.confirm('确认删除用户?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(function () {
    deleteListUsers(idList).then(() => {
      ElMessage.success('删除成功');
      handleQuery();
    });
  });
}

/**
 * 获取部门下拉项
 */
async function getDeptOptions() {
  listDeptOptions().then(res => {
    deptList.value = res.data.data.filter((items: any) => {
      if (items.status === 1) {
        return items
      }
    });
  });
}


/**
 * 下载导入模板
 */
function downloadTemplate() {
  downloadTemplateApi().then((response: any) => {
    // const blob = new Blob([response.data], {
    //   type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
    // });
    // const a = document.createElement('a');
    // const href = window.URL.createObjectURL(blob); // 下载链接
    // a.href = href;
    // a.download = decodeURI(
    //   response.headers['content-disposition'].split(';')[1].split('=')[1]
    // ); // 获取后台设置的文件名称
    // document.body.appendChild(a);
    // a.click(); // 点击下载
    // document.body.removeChild(a); // 下载完成移除元素
    // window.URL.revokeObjectURL(href); // 释放掉blob对象
    // console.log('record.httpAddress: ', record.httpAddress)
    const link = document.createElement('a')
    //_blank表示在新窗口打开链接
    link.target = '_blank'
    link.href = miniioUrl + response.url
    console.log(response.url)
    link.setAttribute('download', '文件名字' + Date.now() + '.xls') // 下载文件的名称及文件类型后缀
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

  });
}

/**
 * 导入弹窗
 */
async function openImportDialog() {
  await getDeptOptions();
  await getRoleOptions();
  importDialog.visible = true;
}

/**
 * Excel文件change事件
 *
 * @param file
 */
function handleExcelChange(file: UploadFile) {
  if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
    ElMessage.warning('上传Excel只能为xlsx、xls格式');
    excelFile.value = undefined;
    excelFilelist.value = [];
    return false;
  }
  excelFile.value = file.raw;
}

/**
 * 导入用户
 */
function handleUserImport() {
  // if (importDeptId.value) {
  if (!excelFile.value) {
    ElMessage.warning('上传Excel文件不能为空');
    return false;
  }
  importUser(excelFile.value).then((response: any) => {
    ElMessage.success(response.message);
    closeImportDialog();
    resetQuery();
  }).catch((error: any) => {
    excelFile.value = undefined;
    excelFilelist.value = [];
  });
  // }
}

/**
 * 关闭导入弹窗
 */
function closeImportDialog() {
  importDialog.visible = false;
  excelFile.value = undefined;
  excelFilelist.value = [];
}

/**
 * 导出用户
 */
function handleUserExport() {
  const handeleUseExportParams = {
    name: queryParams.name || "",
    mobile: queryParams.mobile || "",
  }
  exportUser(handeleUseExportParams).then((response: any) => {
    // const blob = new Blob([response.data], {
    //   type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
    // });
    // const a = document.createElement('a');
    // const href = window.URL.createObjectURL(blob); // 下载的链接
    // a.href = href;
    // a.download = decodeURI(
    //   response.headers['content-disposition'].split(';')[1].split('=')[1]
    // ); // 获取后台设置的文件名称
    // document.body.appendChild(a);
    // a.click(); // 点击导出
    // document.body.removeChild(a); // 下载完成移除元素
    // window.URL.revokeObjectURL(href); // 释放掉blob对象
    const link = document.createElement('a')
    //_blank表示在新窗口打开链接
    link.target = '_blank'
    link.href = miniioUrl + response.url
    console.log(response.url)
    link.setAttribute('download', '文件名字' + Date.now() + '.xls') // 下载文件的名称及文件类型后缀
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  });
}

function changeTenant(val: number[]) {
  formData.tenantRela = val.toString()
}

onMounted(() => {
  getDeptOptions(); // 初始化部门
  handleQuery(); // 初始化用户列表数据
});

// watchEffect 里有涉及属性变动就调用
watchEffect(() => {
  let strArr = formData.tenantRela ? formData.tenantRela.split(',') : null
  formData.tenantRelaArr = strArr ? strArr.map((ele) => (parseInt(ele))) : []
})
</script>

<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!-- 部门树 -->
      <!-- <el-col :lg="4" :xs="24" class="mb-[12px]">
        <el-card shadow="never">
          <el-input v-model="searchDeptName" placeholder="部门名称" clearable>
            <template #prefix>
              <i-ep-search />
            </template>
          </el-input>

          <el-tree
            class="mt-2"
            ref="deptTreeRef"
            :data="deptList"
            :props="{ children: 'children', label: 'label', disabled: '' }"
            :expand-on-click-node="false"
            :filter-node-method="handleDeptFilter"
            default-expand-all
            @node-click="handleDeptNodeClick"
          ></el-tree>
        </el-card>
      </el-col> -->

      <el-col :lg="24" :xs="24">
        <div class="search">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="名称" prop="name">
              <el-input v-model="queryParams.name" placeholder="用户名称" clearable style="width: 200px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
              <el-input v-model="queryParams.mobile" placeholder="手机号" clearable style="width: 200px"
                @keyup.enter="handleQuery" />
            </el-form-item>

            <!-- <el-form-item label="状态" prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="全部"
                clearable
                style="width: 200px"
              >
                <el-option label="启用" value=1 />
                <el-option label="禁用" value=0 />
              </el-select>
            </el-form-item> -->

            <el-form-item>
              <el-button type="primary" @click="handleQuery">
                <i-ep-search />搜索
              </el-button>
              <el-button @click="resetQuery">
                <i-ep-refresh />
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never">
          <template #header>
            <div class="flex justify-between">
              <div>
                <el-button type="success" @click="openDialog()" v-hasPerm="['sys:user:add']">
                  <i-ep-plus />新增
                </el-button>
                <el-button type="danger" :disabled="ids.length === 0" @click="handleDelete()"
                  v-hasPerm="['sys:user:delete']">
                  <i-ep-delete />删除
                </el-button>
              </div>
              <div>
                <el-dropdown split-button>
                  导入
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="downloadTemplate">
                        <i-ep-download />下载模板
                      </el-dropdown-item>
                      <el-dropdown-item @click="openImportDialog">
                        <i-ep-top />导入数据
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button class="ml-3" @click="handleUserExport"><template #icon>
                    <i-ep-download />
                  </template>导出</el-button>
              </div>
            </div>
          </template>

          <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column key="id" label="编号" align="center" prop="id" width="100" />
            <el-table-column key="name" label="用户名" align="center" prop="name" />
            <el-table-column label="用户昵称" width="120" align="center" prop="nickName" />

            <!-- <el-table-column
              label="性别"
              width="100"
              align="center"
              prop="genderLabel"
            /> -->

            <el-table-column label="部门" width="120" align="center" prop="deptName" />
            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />

            <el-table-column label="状态" align="center" prop="status">
              <template #default="scope">
                <el-switch v-model="scope.row.status" :inactive-value="0" :active-value="1" :disabled="true" />
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="180"></el-table-column>
            <el-table-column label="操作" fixed="right" width="220">
              <template #default="scope">
                <!-- <el-button
                  type="primary"
                  size="small"
                  link
                  @click="resetPassword(scope.row)"
                  ><i-ep-refresh-left />重置密码</el-button
                > -->
                <el-button type="primary" link size="small" @click="openDialog(scope.row)" v-hasPerm="['sys:user:edit']">
                  <i-ep-edit />编辑
                </el-button>
                <el-button type="primary" link size="small" @click="handleDelete(scope.row.id)"
                  v-hasPerm="['sys:user:delete']">
                  <i-ep-delete />删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.current"
            v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 表单弹窗 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body @close="closeDialog">
      <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="name">
          <el-input :readonly="!!formData.id" v-model="formData.name" placeholder="请输入用户名" />
        </el-form-item>


        <!-- <el-form-item label="用户密码" prop="password">
          <el-input class="flex-1" v-model="formData.password" placeholder="密码"
            :type="passwordVisible === false ? 'password' : 'input'"
            onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'')"
            oncontextmenu="return false"
            onpaste="return false"
            oncopy="return false"
            oncut="return false"
            auto-complete="off"
            style="text-security:disc; -webkit-text-security:disc;ime-mode:disabled"
            size="large"  name="password" 
            />
          <span class="mr-2" @click="passwordVisible = !passwordVisible">
            <svg-icon :icon-class="passwordVisible === false ? 'eye' : 'eye-open'" class="text-black cursor-pointer" />
          </span>
        </el-form-item> -->

        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="formData.nickName" placeholder="请输入用户昵称" />
        </el-form-item>

        <el-form-item label="所属部门" prop="deptId">
          <el-tree-select v-model="formData.deptId" placeholder="请选择所属部门" :data="deptList"
            :props="{ children: 'children', label: 'name', value: 'id' }" filterable check-strictly
            :render-after-expand="false" />
        </el-form-item>
        <el-form-item label="所属职位" prop="jobId">
          <el-tree-select v-model="formData.jobId" placeholder="请选择所属职位" :data="jobList"
            :props="{ children: 'children', label: 'jobName', value: 'id' }" filterable check-strictly
            :render-after-expand="false" />
        </el-form-item>

        <!-- <el-form-item label="性别" prop="jobId">
          <el-select v-model="formData.gender" placeholder="请选择">
            <el-option label="未知" :value="0" />
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item> -->

        <el-form-item label="角色" prop="roleId">
          <el-select v-model="formData.roleId" placeholder="请选择">
            <template v-for="item in roleList" :key="item.id">
              <el-option v-if="item.status === 1" :label="item.name" :value="item.id" />
            </template>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="租户" prop="tenantRelaArr">
          <el-select style="width:100%" v-model="formData.tenantRelaArr" @change="changeTenant" multiple filterable
            allow-create default-first-option fit-input-width :reserve-keyword="false" placeholder="请选择">
            <template v-for="item in tenantList" :key="item.value">
              <el-option :label="item.label" :value="item.value" />
            </template>
          </el-select>
        </el-form-item> -->

        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <template v-for="item in statusOptionList" :key="item.value">
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 导入弹窗 -->
    <el-dialog :title="importDialog.title" v-model="importDialog.visible" width="600px" append-to-body
      @close="closeImportDialog">
      <el-form label-width="80px">
        <!-- <el-form-item label="部门">
          <el-tree-select v-model="importDeptId" placeholder="请选择部门" :data="deptList" filterable check-strictly />
        </el-form-item> -->

        <el-form-item label="Excel">
          <el-upload class="upload-demo" action="" drag :auto-upload="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :file-list="excelFilelist" :on-change="handleExcelChange" :limit="1">
            <el-icon class="el-icon--upload">
              <i-ep-upload-filled />
            </el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">xls/xlsx files</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleUserImport">确 定</el-button>
          <el-button @click="closeImportDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
